<!--
 * @Description: 视频上传列表入口
 * @Author: liyujie
 * @Date: 2021/3/15
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/3/15
-->
<template>
    <section class="wrapper">
        <div class="content-wrapper">
            <el-tabs
                v-model="active"
                @tab-click="handleTabClick"
            >
                <el-tab-pane
                    label="用户上传"
                    name="student"
                />
                <el-tab-pane
                    label="平台上传"
                    name="admin"
                />
            </el-tabs>
            <dorm-video-list v-if="active === 'admin'"/>
            <student-video-list v-if="active === 'student'"/>
        </div>
    </section>
</template>

<script>
import { back } from '@/mixin/back';
import dormVideoList from './dorm-video-list';
import studentVideoList from './student-video-list';

export default {
    name: 'Index',
    mixins: [back],
    components: {
        dormVideoList,
        studentVideoList
    },
    data() {
        return {
            // student用户上传 admin平台上传
            active: 'student'
        };
    },
    computed: {},
    mounted() {
        this.$store.commit('SET_HEADER', [{ title: "官网"},{ title: "商家增值服务"},{title: '寝室视频上传'}]);
    },
    methods: {
        handleTabClick() {

        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;

        /*el-tabs*/

        /deep/ .el-tabs {

            .el-tabs__nav-wrap {
                height: 54px;
                padding-left: 24px;
                .el-tabs__nav-scroll {
                    .el-tabs__nav {
                        height: 54px;
                        line-height: 54px;
                    }
                }
            }
            .el-tabs__header {
                margin: 0;
            }
        }
    }
}
</style>

